<template>
    <div>
        <router-link
            to="/" 
            tag="div" 
            class="header-abs"
         >
            <div class="iconfont header-abs-back">&#xe624;</div>
        </router-link>
        <div 
            class="header-fixed"
            v-show="!showAbs"
            :style="opacityStyle"
        >
            <router-link class="iconfont header-fixed-back" to="/" tag="div">&#xe624;</router-link>
            景点详情
        </div>
    </div>
</template>
<script>

export default {
    name:'DetailHeader',
    data(){
        return{
            showAbs:true,
            opacityStyle:{
                opacity:0
            }
        }
    },
    methods:{
        handleScroll(){

            const top = document.body.scrollTop+document.documentElement.scrollTop;
            if(top>60){
                let opacity = top / 140
                opacity = opacity > 1 ? 1 : opacity
                this.opacityStyle = { opacity }
                this.showAbs = false
            }else{
                this.showAbs = true
            }
        }        
    },
    activated(){
        window.addEventListener("scroll",this.handleScroll)
    },
    deactivated(){
        window.removeEventListener("scroll",this.handleScroll)
    }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
    .header-abs
        position:absolute
        left: .2rem
        top:.2rem
        width:.8rem
        height:.8rem
        border-radius:.4rem
        background:rgba(0, 0, 0, .8)
        .header-abs-back
            color:#fff
            line-height: .8rem
            margin:0 auto
            text-align:center
    .header-fixed
        position:fixed
        z-index:2
        top:0
        left:0
        right:0
        overflow: hidden
        height: $headerHeight
        line-height: $headerHeight
        text-align: center
        color: #fff
        background: $bgColor
        font-size:.32rem
        .header-fixed-back
            position:absolute
            width:.64rem
            text-align:center
            font-size:.4rem
            left:0
            top:0
            color:#fff

</style>